<template>
<div class="">
  <el-dialog title="选择角色" width="680px" class="icon-dialog" top="5vh" :visible.sync="show" @open="open" :before-close="closeForm">
  <el-table
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      v-loading="loading"
      highlight-current-row
      :default-expand-all="expand"
      @current-change="handleCurrentChange"
      :tree-props="{children: 'children'}"
      row-key="id"
      ref="multipleTable"
      border
      class="eltable"
      :data="list"   style="width: 100%"  >
    <el-table-column  property="id" align="center" type='' label="编号" width="70"></el-table-column>
    <el-table-column  property="title"  label="角色名称"></el-table-column>
    <el-table-column  property="remark"  label="描述"></el-table-column>
    <el-table-column label="操作" width="">
      <template slot-scope="scope">
        <el-button size="mini" @click="checkedItem={}" type="info" v-if="checkedItem.id==scope.row.id">已选择</el-button>
        <el-button size="mini" @click="checkedItem=scope.row" type="primary" v-else>选择</el-button>

      </template>
    </el-table-column>
  </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button size="medium" :loading="loading" type="primary" @click="submit" >确 定</el-button>
      <el-button size="medium" @click="closeForm">取 消</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { genTree  } from '@/api/user/role'
export default {
  name: "role_option",
  components: { },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      expand:true,
      list: [],
      checkedItem: {},
    }
  },
  created() {
  },
  methods: {
    open() {
      this.genTree()
      this.checkedItem = {}
    },
    genTree() {
      genTree().then(res => {
        if (res.code == 0) {
          this.list = res.data.list
        }
      })
    },
    submit() {
      if (typeof this.checkedItem.id == 'undefined') {
        this.$message.error('请选择角色')
        return false
      }
      this.$emit('callFn', {index: this.index, checkedItem: {id:this.checkedItem.id,title: this.checkedItem.title}})
      this.closeForm()
    },
    closeForm(){
      this.checkedId = ''
      this.$emit('update:show', false)
    },
    handleCurrentChange() {

    }
  }
}
</script>

<style scoped>
.operator {
  margin: 10px 0 10px 0;
}
</style>